<template>
	<view class="knowledgePointsDetail">
		<u-navbar title="知识点" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="line"></view>

		<!-- 	<view class="tabsContent">
			<u-tabs :list="list1" :lineColor="role==1?'#FFA116':'#41C76F'" :inactiveStyle="{
        color: '#B4B4B4',
    }" @click="click"></u-tabs>
		</view> -->


		<view class="contentBox">
			<view class="NumberBox">
				{{Pointcurrent+1}}/{{pointsImgList.length}}
			</view>
			<swiper class="pointImngList" circular :autoplay="false" :interval="interval" :duration="duration"
				:current="Pointcurrent" @change="changePointImngList">
				<swiper-item class="pointItem" v-for="(item,index) in pointsImgList" :key="index">
					<image class="pointImg" :src="item.address" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>


		<view class="bottomBox">
			<view class="bottomBox_left">
				<image src="https://mp.blrwworkshop.com/imgs/fileIcon.png" mode=""></image>
				<view class="">
					下载列表
				</view>
			</view>
			<view v-if="!isDownload" class="btns" :class="role==1?'bg_student':'bg_parent'" @click="handleDownFile">
				下载
			</view>
			<view v-else class="btns" :class="role==1?'bg_student':'bg_parent'" @click="handleDownFile">
				本地查看
			</view>
		</view>
	</view>
</template>

<script>
	import {
		viewKnowledgePointImg,
		downloadKnowledgePoint,
		saveDownloadLog,
	} from "@/api/course.js"
	export default {
		data() {
			return {
				role: uni.getStorageSync('role'),
				list1: [{
					name: '知识点1',
				}, {
					name: '知识点1',
				}, {
					name: '知识点1'
				}, {
					name: '知识点1'
				}, {
					name: '知识点1'
				}, {
					name: '知识点1'
				}, {
					name: '知识点1'
				}, {
					name: '知识点1'
				}, {
					name: '知识点1'
				}],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				Pointcurrent: 0,
				pointId: "",
				pointsImgList: [],
				isDownload: false,
				downUrl: "",
				fileaa: "",
			}
		},
		onLoad(options) {
			this.pointId = options.id
			this.downUrl = options.downUrl
			// console.log("downUrl", this.downUrl)
			this.handleGetPointDetail()
		},
		methods: {
			async handleGetPointDetail() {
				let res = await viewKnowledgePointImg({
					id: this.pointId
				})
				this.pointsImgList = res.data
				this.isDownload = res.isDownload
			},


			changePointImngList(event) {
				this.Pointcurrent = event.detail.current
			},

			handleDownFile(filePath) {
				uni.downloadFile({
					// url: "https://mp.blrwworkshop.com/18DAC8561B614EC29394AB06C77CE5E5.pptx", // 文件的网络地址
					url: this.downUrl, // 文件的网络地址
					success: (res) => {
						console.log('文件下载成功');
						if (res.statusCode === 200) {
							// 打开文件（支持pdf、doc、xls等格式）
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true, // 显示右上角菜单，支持转发、保存等操作
								success: () => {
									console.log('文件打开成功');
									this.handleSaveDownloadLog()
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
			async handleSaveDownloadLog() {
				let res = await saveDownloadLog({
					id: Number(this.pointId)
				})
				if (res.code == 200) {
					this.handleGetPointDetail()
				}
			},

			click(item) {
				console.log('item', item);
			}

		}
	}
</script>

<style scoped lang="scss">
	.knowledgePointsDetail {
		width: 100%;
		height: 100vh;

		.line {
			width: 100%;
			height: 1rpx;
			background: rgba(0, 0, 0, 0.1);
		}

		.tabsContent {
			width: 100%;
			height: 84rpx;
			background: #FFFFFF;
		}

		.contentBox {
			height: calc(100vh - 400rpx);
			// background-color: #FFEED4;
			position: relative;

			.NumberBox {
				width: 104rpx;
				height: 40rpx;
				background: #000000;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255, 161, 22, 0.19);
				border-radius: 20rpx;
				opacity: 0.3;
				color: #ffffff;
				text-align: center;
				font-size: 28rpx;
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				z-index: 999;

			}

			.pointImngList {
				width: 100%;
				overflow: visible;
				/* 允许内容超出默认高度 */
				min-height: 1000rpx;
				/* 避免容器初始高度为0 */
			}

			.pointItem {
				width: 100%;
				height: auto;
				/* 轮播项高度随图片自适应 */
				display: flex;
				justify-content: center;
				/* 图片居中显示 */

				image {
					width: 100%;
					/* 图片宽度占满容器 */
					height: auto;
					/* 高度随比例自适应（配合 mode="widthFix"） */
					/* 可选：添加最大高度限制，防止图片过高 */
					max-height: 80vh;
					/* 例如不超过屏幕高度的80% */
				}
			}
		}

		.bottomBox {
			width: 100%;
			height: 140rpx;
			padding: 30rpx;
			padding-bottom: 50rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;

			.bottomBox_left {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.btns {
				width: 204rpx;
				height: 60rpx;
				border-radius: 30rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}
		}

	}
</style>